<template lang="pug">
    div(:class="[{'is-active': isActive}, 'hamburger-container']" @click='toggleClick')
        svg-icon(name='hamburger' width='20' height='20').

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  }
})
export default class Hamburger extends Vue {
  public isActive!: boolean;
  public toggleClick!: () => void;
}
</script>

<style scoped>
.hamburger-container {
  line-height: 58px;
  height: 50px;
  float: left;
  padding: 0 5px;
}
.hamburger-container.is-active {
  transform: rotate(180deg);
}
</style>
